<template>
  <div class="search-box">
    <div class="search-item">
      <a-input class="input-item" placeholder="请输入检索词" v-model="searchValue"/>
      <a-button class="button-item" @click="onSearch">
        <a-icon type="search"/>
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "GuideBarSearchComponent",
  props: {
    path: String,
    code: String
  },
  data() {
    return {
      searchValue: ''
    }
  },
  methods: {
    onSearch(){
      console.log("onSearch()")
      if(this.$route.name !== 'home'){
        this.$router.push({name: "ResourceGuides" + this.path, query: {code: this.code, keyword: this.searchValue}})
      }else{
        this.$router.push({path: "Search/"+this.searchValue})
      }
    },
    handleChange(value) {
      console.log(`selected ${value}`);
      this.$router.push({name: "ResourceGuides" + this.path, query: {code: this.code, keyword: value}})
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },

};
</script>


<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;

  .search-item {
    border: 1px solid RGBA(15, 121, 205, 1);
    box-shadow: 0 0 1px RGBA(15, 121, 205, 1);
    box-sizing: border-box;
    width: 240px;
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(to right, white 75.5%, RGBA(15, 121, 205, 1) 75.5%);
    background-clip: border-box;

    .input-item {
      width: 180px;
      height: 30px;
      border: none;
    }

    .button-item {
      width: 60px;
      height: 35px;
      border-radius: 0 16px 16px 0;
      border: none;
      background-color: RGBA(15, 121, 205, 1);
      color: white;
      font-size: 18px;
    }
  }
}
</style>


<style scoped>

/*a-input组件原生css,这里要把他去掉*/
.ant-input:focus {
  border-color: white;
  border-right-width: 0px !important;
  outline: 0;
  box-shadow: 0 0 0 2px white;
}

.ant-input:hover {
  border-color: white;
  border-right-width: 1px !important;
}

</style>
